<template>
  <div class="container">
    <!-- 导航条 -->
    <van-nav-bar left-arrow
                 @click-left="$router.back()"
                 title="编辑资料"></van-nav-bar>

    <!-- 编辑区 -->
    <!-- 隐藏调图片的input框，由点击头像触发input的点击事件 -->
    <input type="file"
           hidden
           ref="refPhoto"
           @change="hPhotoChange" />
    <van-cell-group>
      <van-cell is-link
                title="头像"
                center
                @click="hShowSelectImage">
        <van-image width="1.5rem"
                   height="1.5rem"
                   fit="cover"
                   round
                   :src="user.photo" />
      </van-cell>

      <van-cell is-link
                title="名称"
                :value="user.name"
                @click="editName" />
      <van-cell is-link
                title="性别"
                :value="user.gender === 0?'男':'女'"
                @click="editGender" />
      <van-cell is-link
                title="生日"
                :value="user.birthday"
                @click="editBirthday" />
    </van-cell-group>
    <!-- 弹窗组件调用，用于修改用户名 -->
    <van-dialog v-model="showName"
                title="修改用户名"
                show-cancel-button
                @confirm="updateName">
      <van-field v-model="newName" />
    </van-dialog>
    <!-- 弹窗组件调用，用于修改性别 -->
    <van-dialog v-model="showGender"
                title="性别"
                show-cancel-button
                @confirm="updateGender">
      <van-radio-group v-model="value"
                       direction="horizontal">
        <van-radio name="0"
                   @click="value='0'">男</van-radio>
        <van-radio name="1"
                   @click="value='1'">女</van-radio>
      </van-radio-group>
    </van-dialog>
    <!-- 弹窗组件调用，用于修改日期 -->
    <van-popup v-model="showBirthday"
               position="bottom">
      <van-datetime-picker type="date"
                           title="选择年月日"
                           v-model="newDate"
                           @cancel="showBirthday=false"
                           @confirm="updateBirthday"
                           :min-date="minDate"
                           :max-date="maxDate" />
    </van-popup>
  </div>
</template>

<script>
import { getProfile, updateUserInfo, updatePhoto } from '@/api/user.js'
import { formatTime } from '@/utils/timeFormat.js'
export default {
  name: 'userProfile',
  data () {
    return {
      // 控制弹层
      showName: false, // 控制修改用户名弹窗
      newName: '', // 输入用户名
      showGender: false, // 控制修改性别弹窗
      value: '', // 修改性别
      showBirthday: false, // 控制修改日期的弹窗
      // 当前用户的信息
      user: {},
      updateUser: {
        birthday: new Date()
      }, // 专门用来编辑时回显
      // 修改后新生日
      newDate: new Date(),
      minDate: new Date(1965, 0, 10), // dateTime-pixcker中最小时间
      maxDate: new Date() // 当前时间
    }
  },
  methods: {
    hGetProfile () {
      getProfile().then(res => {
        this.user = res.data.data
      })
    },
    // 点击用户名，弹窗
    editName () {
      this.showName = true
      this.newName = this.user.name
    },
    updateName () {
      const data = {
        name: this.newName
      }
      updateUserInfo(data).then(res => {
        this.hGetProfile()
      })
    },
    // 修改性别，弹窗
    editGender () {
      this.showGender = true
      this.value = String(this.user.gender)
      console.log(this.value)
    },
    updateGender () {
      console.log(this.value)
      const data = {
        gender: this.value
      }
      updateUserInfo(data).then(res => {
        this.hGetProfile()
      })
    },
    // 修改日期
    editBirthday () {
      this.showBirthday = true
      // 变成标准的时间date格式
      this.newDate = new Date(this.user.birthday)
    },
    updateBirthday () {
      const data = {
        birthday: formatTime(this.newDate, 'YYYY-MM-DD')
      }
      updateUserInfo(data).then(res => {
        this.showBirthday = false
        this.hGetProfile()
      })
    },
    // 点击更换头像框
    hShowSelectImage () {
      this.$refs.refPhoto.click()
    },
    // 点击确定，更改图片，并获取选中图片
    hPhotoChange () {
      const fl = this.$refs.refPhoto.files[0]
      const fd = new FormData()
      fd.append('photo', fl)
      updatePhoto(fd).then(res => {
        this.hGetProfile()
      })
    }
  },
  mounted () {
    this.hGetProfile()
  }
}
</script>
